<!DOCTYPE html>
<html  data-layout-decorate="~{fragment/layout}">
<head>
<meta charset="UTF-8">
<title>考核评分</title>
<script type="text/javascript">
$(function(){
	/* $('#mytable').bootstrapTable({
		sidePagination: "server",
		url : '/table/page'
	}); */
    var data =  {
	    tableParams : {
	    	//toolbar: '#toolbar',  //工具栏的ID
	    	pageSize:25,
	    	url : 'page'
	    	},
	    	
	    	urls : {
	    		delete : 'delete',
	    		update : 'edit',
	    		add : 'edit',
	    		search:'search'
	    	},
	    	
	    	queryCondition : {
	    		testId : [[${model.testId}]],
	    		teacherId : [[${model.teacherId}]],
	    		studentId: [[${model.studentId}]]
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('scroingGrade_table_div'));	
	
});
function gradeformatter(value,row,index){
	return '<input type="text" name="title"  class="form-control" value="'+(value==null?'':value)+'"  placeholder="评分" onkeydown="return gradekeydown(event,this)" onchange="gradeChange(this,this.value,'+row.id+','+row.scoringScore+')">';
}

function gradekeydown(e,obj){
	var keynum;
	var keychar;
	var numcheck;

	if(window.event){ 	// IE
	  keynum = e.keyCode;
	}
	else if(e.which) 	// Netscape/Firefox/Opera
	{
	  keynum = e.which;
	}
	//alert(keynum);
	keychar = String.fromCharCode(keynum);
	numcheck = /\d/;
	if(numcheck.test(keychar)||keynum==46||keynum==8){
		$(obj).css('color','red');
	}else if(keynum==8||keynum==9||keynum==13||keynum==17||keynum==18||keynum==46||keynum==37||keynum==39){
		return true;
	}else{
		return false;
	}
	
}
function gradeChange(obj,value,id,score){
	var $this=$(obj);
	var x=/^\d+$/;
	if(!x.test(value)){
		bootbox.alert(value+' 不是一个合法的整数');
		return;
	}
	if(value>score){
		bootbox.alert(value+' 的值比此项的分值还大');
		return;
	}
	$.post('gradeChange',{id:id,grade:value},function(data){
		$this.css("color","blue");
	});
}
</script>
</head>
<body>
	<section data-layout-fragment="content">
	<div id="scroingGrade_table_div" class="container">
	
		
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<!-- <th data-checkbox="true"></th> -->
					<!-- <th data-field="id">ID</th> -->
					<th data-field="testName" data-visible="false">考试名称</th>
					<th data-field="studentName" data-visible="false">学生姓名</th>
					<th data-field="scoringTitle">评分项</th>
					<th data-field="scoringExplanation">评分说明</th>
					<th data-field="scoringScore">分值</th>
					<th data-field="grade" data-formatter="gradeformatter">评分</th>
				</tr>
			</thead>
		</table>
	</div>
	</section>
</body>
</html>